<template>
    <el-dialog close-on-click-modal width="80%" :model-value=show>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="name" label="优惠卷类型" width="180" />
            <el-table-column prop="address" label="可使用商品" width="180" />
            <el-table-column prop="name" label="使用门槛" width="180" />
            <el-table-column prop="name" label="面值" width="180" />
            <el-table-column prop="name" label="状态" width="180" />
        </el-table>
        <el-table :data="data" border style="width: 100%">
            <el-table-column prop="date" label="有效期" width="180" />
            <el-table-column prop="name" label="总发行量" width="180" />
            <el-table-column prop="name" label="已领取" width="180" />
            <el-table-column prop="name" label="待领取" width="180" />
            <el-table-column prop="name" label="已使用" width="180" />
            <el-table-column prop="name" label="未使用" width="180" />
        </el-table>
        <div class="search-box">
            <div class="row">
                <div class="left">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>
                <div class="right">
                    <el-button>重置</el-button>
                    <el-button type="primary">查询搜索</el-button>
                </div>
            </div>
            <div class="box">
                <div class="inp">
                    <span>使用状态:</span>
                    <el-select class="m-2" placeholder="全部">
                        <el-option label='未使用' value="0"></el-option>
                        <el-option label='已使用' value="1"></el-option>
                        <el-option label='已过期' value="2"></el-option>
                    </el-select>
                </div>
                <div class="inp">
                    <span>订单编号:</span>
                    <el-input placeholder="订单编号"></el-input>
                </div>
            </div>
        </div>
        <el-table class="b" :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="优惠码" width="180" />
            <el-table-column prop="name" label="领取会员" width="180" />
            <el-table-column prop="address" label="领取方式" width="180" />
            <el-table-column prop="name" label="领取时间" width="180" />
            <el-table-column prop="name" label="当前状态" width="180" />
            <el-table-column prop="name" label="使用时间" width="180" />
            <el-table-column prop="name" label="订单编号" width="180" />
        </el-table>
        <ElConfigProvider>
            <div class="page">
                <el-pagination :page-sizes="[10, 20, 50, 100]" background
                    layout="total, sizes, prev, pager, next, jumper" :total="1" />
            </div>
        </ElConfigProvider>
        <div class="a"></div>
    </el-dialog>

</template>

  
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { couponInquireApi } from './api'
import { Search } from "@element-plus/icons-vue";
let data = reactive<any>([])
const tableData = [
    {

    },

]

couponInquireApi(20).then((res) => { 
})
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
})

</script>
<style lang="less" scoped>
.search-box {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;

    .row {
        padding: 20px 0;
        display: flex;

        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            width: 200px;

            span {
                width: 100px;
            }
        }
    }

    .box {
        display: flex;

        .inp {
            margin-right: 30px;
            display: flex;
            width: 40%;

            span {
                width: 100px;
                line-height: 30px;
            }

            input {
                width: 120px;
            }
        }
    }

}

:deep(.el-pagination) {
    float: right;
}

:deep(.el-dialog__body) {
    height: 800px;
    height: 0;
}

.a {
    height: 50px;
}

.b {
    margin-bottom: 30px;
}
</style>